<template>
  <view class="page-default">
    <c-nav-bar title="宿舍迎新列表" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="flex items-center justify-between bg-#E0E7EC px-2 py-2">
      <up-search
        input-align="left" height="34" search-icon="search" bg-color="#ffffff"
        :search-icon-size="30" search-icon-color="#00E0AE" :show-action="false" placeholder-color="#C5C9D1"
        placeholder="请输入姓名或电话查询"
        class="mx-4"
      />
      <view class="ml-2 h-8 w-[90px] flex items-center justify-center rounded-6 bg-#FFFFFF text-#6E7B8B" @click="popupShow = true">
        筛选
        <u-image class="ml-2" src="/static/images/filter.png" height="16" width="16" mode="aspectFill" />
      </view>
    </view>
    <!-- 学生列表 -->
    <view class="border-line mx-3 mt-4 rounded-2 bg-white pb-4">
      <view class="flex items-center gap-2 border rounded-2 bg-#f5f8f9 px-4 py-2 text-#6E7B8B">
        <view class="w-[75px] flex items-center justify-left">
          姓名
        </view>
        <view class="flex flex-1 items-center justify-left">
          电话
        </view>
        <view class="w-[65px] flex items-center justify-right">
          宿舍号
        </view>
        <view class="w-[65px] flex items-center justify-center">
          已报到
        </view>
      </view>
      <template v-for="item in dataList" :key="item.name">
        <view class="border-line-dashed mx-4 flex items-center gap-2 py-2">
          <view class="w-[85px] flex items-center justify-left">
            {{ item.name }}<text class="text-xs text-#C5C9D1">
              (男)
            </text>
          </view>
          <view class="flex flex-1 items-center justify-left">
            {{ item.telphone }}
          </view>
          <view class="w-[65px] flex items-center justify-right">
            {{ item.number }}
          </view>
          <view class="w-[65px] flex items-center justify-center">
            <up-icon name="checkmark-circle-fill" color="#00E0AE" size="20" />
          </view>
        </view>
      </template>
    </view>

    <!-- 筛选条件 -->
    <u-popup :show="popupShow" mode="bottom" border-radius="14" :closeable="false" bg-color="#F5F9FC">
      <view class="mt-2 text-sm">
        <view class="mb-4 flex items-center gap-2 border rounded-2 px-4 py-2 text-#6E7B8B" @click="popupShow = false">
          <view class="w-[75px] flex items-center justify-left text-#6E7B8B">
            取消
          </view>
          <view class="flex flex-1 items-center justify-center text-lg text-[#1A2B5C] fw600">
            筛选条件
          </view>
          <view class="w-[65px] flex items-center justify-right text-#00E0AE" @click="popupShow = false">
            确认
          </view>
        </view>
        <!-- <view class="mb-2 text-center text-xl text-[#1A2B5C] fw600">
          筛选条件
        </view> -->

        <up-form ref="form1" class="mx-4 rounded-4 bg-#ffffff px-4 py-2" label-position="left" label-width="auto" :model="dataForm">
          <up-form-item ref="item1" label="选择宿舍" label-position="top" :border-bottom="false" prop="name">
            <up-radio-group v-model="checked" placement="row">
              <up-radio active-color="#00E0AE" label="男生公寓" class="mr-4" />
              <up-radio active-color="#00E0AE" label="女生公寓" class="mr-4" />
            </up-radio-group>
          </up-form-item>
          <up-form-item ref="item1" label="是否报到" label-position="top" :border-bottom="false" prop="name">
            <up-radio-group v-model="checked" placement="row">
              <up-radio active-color="#00E0AE" label="全部" class="mr-4" />
              <up-radio active-color="#00E0AE" label="是" class="mr-4" />
              <up-radio active-color="#00E0AE" label="否" class="mr-4" />
            </up-radio-group>
          </up-form-item>
          <up-form-item ref="item1" label="当前班级" label-position="top" :border-bottom="false" prop="name">
            <up-checkbox-group v-model="checked" placement="row">
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="2025级旅游1班" class="mr-4" />
            </up-checkbox-group>
          </up-form-item>
        </up-form>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const dataList = ref([
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, number: '1-24', infoStatus: false },

]);
const popupShow = ref(false);
</script>

<style lang="scss" scoped>
:deep(.u-popup__content){
  border-radius: 15px 15px 0px 0px;
}
.border-line {
  border: 1px #ffffff solid;
}
.border-line-dashed{
  border-bottom: 1px #e0e7ec dashed;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}
:deep(.u-checkbox__icon-wrap--square){
  border-radius: 5px !important;
}
</style>
